// 引入Count的ui组件
// import UICount from '../../components/Count'
import React, { Component } from 'react'
// 引入connect用于连接UI组件和redux
import {connect} from 'react-redux'
// 引入action
import { createIncrementAction, createDecrementAction, createIncrementAyncAction } from '../../redux/count_action'
// 容器组件给UI子组件传参
// mapStateToProps函数返回的对象中的key作为传递给UI组件props的key，value作为传递给UI组件props的value--状态
// mapStateToProps用于传递状态
// function mapStateToProps(state) {
//   return {count: state}
// }
// mapDispatchToProps函数返回的对象中的key作为传递给UI组件props的key，value作为传递给UI组件props的value--方法
// mapDispatchToProps用于传递操作状态的方法
// function mapDispatchToProps(dispatch) {
//   return {
//     add: (number) => dispatch(createIncrementAction(number)),
//     sub: (number) => dispatch(createDecrementAction(number)),
//     addAsync: (number, time) => dispatch(createIncrementAyncAction(number, time))
//   }
//  }
// export default connect(mapStateToProps, mapDispatchToProps)(UICount)
class UICount extends Component {
  increment = ()=>{
      const {value} = this.selectNumber
      this.props.add(value*1)
  }
  decrement = ()=>{
      const {value} = this.selectNumber
      this.props.sub(value*1)
  }
  incrementIfOdd = ()=>{
      const {value} = this.selectNumber
      if(this.props.count % 2 !==0){
          this.props.add(value*1)
      }
  }
  incrementAsync = ()=>{
      const {value} = this.selectNumber
      this.props.addAsync(value*1,1000)
  }
render() {
  return (
      <div>
          <h1>当前求和为：{this.props.count}</h1>
          <select ref={c=>this.selectNumber = c}>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
          </select>
          <button onClick={this.increment}>+</button>
          <button onClick={this.decrement}>-</button>
          <button onClick={this.incrementIfOdd}>当前求和为奇数时加</button>
          <button onClick={this.incrementAsync}>异步加</button>
      </div>
  )
}
}
export default connect(
  (state)=>({count: state}), 
  // mapDispatchToProps的简写方式（api层级的优化）
  {
    // 方法名：提供的action；这种格式提供给react-redux，api内部就会帮你dispatch分发action
    add: createIncrementAction,
    sub: createDecrementAction,
    addAsync: createIncrementAyncAction
  }
)(UICount)